<template>
  <div :class="isFocus ? 'm-search-focus' : 'm-search'">
    <input class="m-search-kuang" v-model="message" @focus="inputFocus" @blur="inputBlur" placeholder="搜索内容" />
    <p class="m-search-btn" @click="search"></p>
  </div>
</template>

<script>
import { reactive, toRefs, watchEffect } from 'vue'

export default {
  name: 'Tab',
  setup(props) {
    const state = reactive({
      message: '',
      isFocus: false
    })
    const inputFocus = () => {
      state.isFocus = true
    }
    const inputBlur = () => {
      state.isFocus = false
    }
    const search = () => {
      console.log(this.message)
    }
    watchEffect(() => {
      console.log(props)
    })
    return {
      ...toRefs(state),
      inputFocus,
      inputBlur,
      search
    }
  }
}
</script>

<style scoped>
.m-search {
  display: flex;
  align-items: center;
  width: 238px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}
.m-search-focus {
  display: flex;
  align-items: center;
  width: 238px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid #31c0fd;
  border-radius: 6px;
}
.m-search-kuang {
  flex: 1;
  border: none;
  outline: none;
}
.m-search-btn {
  width: 33px;
  height: 20px;
  background: url(../../assets/imgs/searchon.png) no-repeat 0 0;
  cursor: pointer;
}
</style>
